<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Table Sort</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css" rel="stylesheet">
.odd {
	background-color: lightblue;
}
.even {
	background-color: yellow;
}
.clickable {
	cursor: pointer;
}
.active {
	color: Chartreuse;
}
  </style>
  <script src="../jquery-1.7.2.js" charset="UTF-8"></script>
  <script>
/**
 * 表格行交叉变色
 * 单击表头交替排序方向
 * 实现带排序的分页，即避免排序和分页的混淆
 *
 *
 */

 // jQuery 插件，this 表示 jQuery 对象
jQuery.fn.alternateRowColors = function() {
	$('tbody tr:odd', this).removeClass('even').addClass('odd');
	$('tbody tr:even', this).removeClass('odd').addClass('even');
	return this;
};

// 排序
$(document).ready(function() {
	//var alternateRowColors = function($table) {
		//$('table.sortable tbody tr:odd').removeClass('even').addClass('odd');
		//$('table.sortable tbody tr:even').removeClass('odd').addClass('even');
	//};
	$('table.sortable').each(function() {
		var $table = $(this);
		$table.alternateRowColors();
		$('th', $table).each(function(column) {
			var $header = $(this);
			var findSortKey;
			if ($header.is('.sort-alpha')) {
				findSortKey = function($cell) {
					return $cell.text().toUpperCase();
				};
			} else if ($header.is('.sort-numeric')) {
				findSortKey = function($cell) {
					var key = $cell.text().replace(/^[^\d.]*/, '');
					key = parseFloat(key);
					return isNaN(key) ? 0 : key;
				};
			} else if ($header.is('.sort-date')) {
				findSortKey = function($cell) {
					return Date.parse('1 ' + $cell.text());
				};
			}
			if (findSortKey) {
				$header.click(function() {
					// 排序方向
					var sortDirection = 1;
					if ($header.is('.sort-asc')) {
						sortDirection = -1;
					}
					var rows = $table.find('tbody > tr').get();
					$.each(rows, function(index, row) {
						var $cell = $(row).children('td').eq(column);
						row.sortKey = findSortKey($cell);
					});
					rows.sort(function(a, b) {
						if (a.sortKey > b.sortKey) return sortDirection;
						if (a.sortKey < b.sortKey) return -sortDirection;
						return 0;
					});
					$.each(rows, function(index, row) {
						$table.children('tbody').append(row);
						row.sortKey = null;
					});
					
					$table.find('th').removeClass('sort-asc').removeClass('sort-desc');
					if (sortDirection == 1)
					{
						$header.addClass('sort-asc');
					}
					else
					{
						$header.addClass('sort-desc');
					}
					//console.log($table.find('th'));
					$table.alternateRowColors();
					$table.trigger('repaginate');
				});
			}
		}).addClass('clickable');
	});
});


// 分页
$(document).ready(function() {
	$('table.paginated').each(function() {
		var currentPage = 0;
		var numPerPage = 3;
		var $table = $(this);
		$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
		$table.bind('repaginate', function() {
			$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
		});
		var numRows = $table.find('tbody tr').length;
		var numPages = Math.ceil(numRows / numPerPage);
		var $pager = $('<div class="paper"></div>');
		for (var page = 0; page < numPages; page++) {
			$('<span class="page-number"></span>').text(page + 1).bind('click', {newPage: page}, function(event) {
				currentPage = event.data['newPage'];
				$table.trigger('repaginate');
				$(this).addClass('active').siblings().removeClass('active');
			}).appendTo($pager).addClass('clickable');
		}
		$pager.insertBefore($table).find('span.page-number:first').addClass('active');
	});
});
  </script>
 </head>

 <body>
  <table class="sortable paginated">
   <thead>
    <tr>
	 <th></th>
	 <th>Title</th>
	 <th class="sort-alpha">Author(s)</th>
	 <th class="sort-date">Publish&nbsp;Date</th>
	 <th class="sort-numeric">Price</th>
	</tr>
   </thead>
   <tbody>
    <tr>
	 <td></td>
	 <td>Building Websites with Joomla! 1.5 Beta 1</td>
	 <td>Hagen Graf</td>
	 <td>Feb 2007</td>
	 <td>$40.49</td>
	</tr>
	<tr>
	 <td></td>
	 <td>Learning Mambo: A Step-by-Step Tutorial to Building Your Website</td>
	 <td>Douglas Paterson</td>
	 <td>Dec 2006</td>
	 <td>$40.49</td>
	</tr>
	<tr>
	 <td></td>
	 <td>Moodle E-Learning Course Development</td>
	 <td>William Rice</td>
	 <td>May 2006</td>
	 <td>$35.99</td>
	</tr>
	<tr>
	 <td></td>
	 <td>OpenVPN: Building and Integrating Virtual Private Networks</td>
	 <td>Markuts Fellner</td>
	 <td>May 2006</td>
	 <td>$53.99</td>
	</tr>
	<tr>
	 <td></td>
	 <td>Building Websites with Joomla! 1.5 Beta 1</td>
	 <td>Hagen Graf</td>
	 <td>Feb 2007</td>
	 <td>$40.49</td>
	</tr>
	<tr>
	 <td></td>
	 <td>Learning Mambo: A Step-by-Step Tutorial to Building Your Website</td>
	 <td>Douglas Paterson</td>
	 <td>Dec 2006</td>
	 <td>$40.49</td>
	</tr>
	<tr>
	 <td></td>
	 <td>Moodle E-Learning Course Development</td>
	 <td>William Rice</td>
	 <td>May 2006</td>
	 <td>$35.99</td>
	</tr>
	<tr>
	 <td></td>
	 <td>OpenVPN: Building and Integrating Virtual Private Networks</td>
	 <td>Markuts Fellner</td>
	 <td>May 2006</td>
	 <td>$53.99</td>
	</tr>
   </tbody>
  </table>
 </body>
</html>
